let map;
let btn_img = require('../assets/image/search.png');
let mark;
let count = 0;
let is_show = true;

function searchLocal(val) {
    let local = new BMap.LocalSearch(map, {
      renderOptions: {
        map: map
      }
    });
    local.search(val);
}

export function getMap() {
  map = new BMap.Map('allmap', {
    mapType: BMAP_HYBRID_MAP
  });
  let point = new BMap.Point(113.851874, 22.894162);

  map.centerAndZoom(point, 17);

  map.enableScrollWheelZoom(true);
  let polygon_1 = new BMap.Polygon([
    new BMap.Point(113.850859, 22.895797),
    new BMap.Point(113.853325, 22.894678),
    new BMap.Point(113.851731, 22.891765),
    new BMap.Point(113.849709, 22.891673),
    new BMap.Point(113.849687, 22.893288)
  ], {
    strokeOpacity: 0.5,
    fillColor: 'blue'
  }); //创建多边形

  let polygon_2 = new BMap.Polygon([
    new BMap.Point(113.848178, 22.893562),
    new BMap.Point(113.848834, 22.893683),
    new BMap.Point(113.848816, 22.893916),
    new BMap.Point(113.849404, 22.894016),
    new BMap.Point(113.849638, 22.893284),
    new BMap.Point(113.849206, 22.893142),
    new BMap.Point(113.849364, 22.892214),
    new BMap.Point(113.848452, 22.891419)
  ], {
    strokeColor: "red",
    strokeWeight: 2,
    strokeOpacity: 0.5
  });

  let polygon_3 = new BMap.Polygon([
    new BMap.Point(113.853244, 22.8937),
    new BMap.Point(113.854735, 22.894108),
    new BMap.Point(113.855059, 22.89345),
    new BMap.Point(113.855845, 22.893134),
    new BMap.Point(113.855939, 22.891602),
    new BMap.Point(113.855477, 22.891536),
    new BMap.Point(113.854852, 22.891881),
    new BMap.Point(113.854174, 22.890886),
    new BMap.Point(113.852274, 22.891902)
  ], {
    strokeColor: "red",
    strokeWeight: 2,
    strokeOpacity: 0.5
  });

  // 定义周围覆盖函数
  function addRoundOverlay() {
    map.addOverlay(polygon_2);
    let label2_point = new BMap.Point(113.848627, 22.892909);
    let label_2 = new BMap.Label("工业区", {
      position: label2_point,
      offset: new BMap.Size(-20, 0)
    });
    label_2.setStyle({
      color: "red",
      fontSize: "18px",
      height: "30px",
      lineHeight: "20px",
      fontFamily: "微软雅黑",
      border: 'none',
      fontWeight: '600',
      backgroundColor: 'none'
    });
    map.addOverlay(label_2);
    map.addOverlay(polygon_3);
    let label3_point = new BMap.Point(113.853815, 22.892568);
    let label_3 = new BMap.Label("工业区", {
      position: label3_point
    });
    label_3.setStyle({
      color: "red",
      fontSize: "18px",
      height: "30px",
      lineHeight: "20px",
      fontFamily: "微软雅黑",
      border: 'none',
      fontWeight: '600',
        backgroundColor: 'none'
    });
    map.addOverlay(label_3);
  }

  // 定义清除覆盖函数 
  function removeOverlay() {
    map.clearOverlays();
  }

  // 定义目标覆盖函数
  function objOverlay() {
      clearInterval()
    map.addOverlay(polygon_1);
    let label = new BMap.Label("项目地址", {
      position: point,
      offset: new BMap.Size(-80, 40)
    });
    label.setStyle({
      color: "red",
      fontSize: "18px",
      height: "30px",
      lineHeight: "20px",
      fontFamily: "微软雅黑",
      border: 'none',
      fontWeight: '600',
        backgroundColor: 'none'
    });
    map.addOverlay(label);
    mark = setInterval(() => {
        if (count < 4) {
            if (is_show) {
              polygon_1.hide();
              label.hide();
              is_show = false;
            } else {
              polygon_1.show();
              label.show();
              is_show = true;
              count++;
            }
        } else {
            clearInterval(mark);
            count = 0;
        }
        
    }, 300);
  }

  // 定义控件按钮
  function zoomControl() {
    this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
    this.defaultOffset = new BMap.Size(500, 30);
  }
  zoomControl.prototype = new BMap.Control();
  //   zoomControl.prototype.initialize = function (map) {

  //   }
  zoomControl.prototype.initialize = function (map) {
    // 创建一个DOM元素
    let div = document.createElement("div");
    // 设置样式
    div.style.fontSize = '14px';
    let button_1 = div.appendChild(document.createElement('button'));
    button_1.innerText = '项目地址展示';
    button_1.style.height = '36px';
    button_1.style.backgroundColor = '#3581fb'
    button_1.style.outline = 'none';
    button_1.style.width = '100px';
    button_1.style.color = '#fff';
    button_1.style.border = 'none';
    button_1.style.borderRadius = '2px';
    button_1.style.cursor = "pointer";
    let button_2 = div.appendChild(document.createElement('button'));
    button_2.innerText = '周围环境展示';
    button_2.style.height = '36px';
    button_2.style.backgroundColor = '#3581fb'
    button_2.style.outline = 'none';
    button_2.style.width = '100px';
    button_2.style.color = '#fff';
    button_2.style.border = 'none';
    button_2.style.marginLeft = '100px';
    button_2.style.borderRadius = '2px';
    button_2.style.cursor = "pointer";
    // 添加DOM元素到地图中
    map.getContainer().appendChild(div);
    button_1.onclick = function () {
        removeOverlay();
        objOverlay();
    }
    button_2.onclick = function () {
        addRoundOverlay();
    }
    // 将DOM元素返回
    return div;
  }
  // 创建控件
  let my_zoom_control = new zoomControl();
  // 添加到地图当中
  map.addControl(my_zoom_control);


  function searchControl() {
      this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
      this.defaultOffset = new BMap.Size(32, 30);
  }

  searchControl.prototype = new BMap.Control();
  searchControl.prototype.initialize = function (map) {
      let div = document.createElement('div');
      let input = div.appendChild(document.createElement('input'));
      let button = div.appendChild(document.createElement('button'));
      let img = button.appendChild(document.createElement('img'));
      img.src = btn_img;
      img.style.width = '20px';
      input.style.width = '227px';
      input.style.height = '18px';
      input.style.border = 'none';
      input.style.outline = 'none';
      input.style.padding = '8px 16px';
      input.style.borderTopRightRadius = '2px';
      input.style.borderBottomLeftRadius = '2px';
      input.style.border = "1px solid #d3d9e2";
      input.style.borderRight = 'none';
      button.style.width = '40px';
      button.style.height = '36px';
      button.style.border = 'none';
      button.style.outline = 'none';
      button.style.backgroundColor = '#3581fb';
      button.style.color = '#fff';
      button.style.borderTopRightRadius = '2px';
      button.style.borderBottomRightRadius = '2px';
      button.style.verticalAlign = 'bottom';
      button.onclick = function () {
          let name = input.value;
          searchLocal(name);
      }
      map.getContainer().appendChild(div);
      return div;
  }
  let search_control = new searchControl();
  map.addControl(search_control);
}
